<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>足迹特征分析系统</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">
    <link rel="icon" href="{{ url_for('static', filename='img/favicon.jpg') }}">
    <meta name="api_url" content="{{ api_url }}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<div class="container">
    <h1>足迹特征分析</h1>

    <div class="form-section">
        <div class="input-group">
            <label for="foot_length">脚印长度 (cm):</label>
            <input type="number" id="foot_length" step="0.1" min="20" max="35" required>
        </div>

        <div class="input-group">
            <label for="foot_width">脚印宽度 (cm):</label>
            <input type="number" id="foot_width" step="0.1" min="8" max="12" required>
        </div>

        <div class="input-group">
            <label for="arch_height">足弓高度 (cm):</label>
            <input type="number" id="arch_height" step="0.1" min="2" max="4.5" required>
        </div>

        <div class="input-group">
            <label for="depth_diff">深度差 (mm):</label>
            <input type="number" id="depth_diff" step="0.1" min="-5" max="5" required>
        </div>

        <div class="input-group">
            <label for="pressure_offset_x">压力偏移 (mm):</label>
            <input type="number" id="pressure_offset_x" step="0.1" min="-5" max="5" required>
        </div>

        <div class="input-group">
            <label for="ground_type">地面类型:</label>
            <select id="ground_type" required>
                <option value="concrete">水泥地</option>
                <option value="wet_soil">湿泥土</option>
                <option value="dry_soil">干泥土</option>
                <option value="sand">沙地</option>
                <option value="grass">草地</option>
            </select>
        </div>

        <div class="input-group">
            <label for="humidity">环境湿度 (%):</label>
            <input type="number" id="humidity" min="0" max="100" required>
        </div>

        <div class="input-group">
            <label for="depth">凹陷深度 (mm):</label>
            <input type="number" id="depth" step="0.1" min="0.5" max="8" required>
        </div>

        <div class="input-group">
            <label for="pressure_avg">平均压力 (kPa):</label>
            <input type="number" id="pressure_avg" step="0.1" min="70" max="100" required>
        </div>

        <div class="button-group">
            <button onclick="analyzeFootprint()">开始分析</button>
            <button class="btn-secondary" onclick="fillSampleData()">加载样本数据</button>
            <button class="btn-secondary" onclick="resetForm()">重置表单</button>
        </div>
    </div>
</div>
<div class="result-card" id="resultSection">
    <h3>分析结果</h3>

    <div class="result-item">
        <p>预测身高: <strong id="heightResult">-</strong> cm</p>
        <p>预测体重: <strong id="weightResult">-</strong> kg</p>
    </div>

    <div class="result-item">
        <h4>腿型概率分布</h4>
        <div class="leg-type">
            <p>正常腿型: <span class="prob-value">0%</span></p>
            <div class="progress-bar">
                <div class="progress-fill" style="background-color: #48bb78"></div>
            </div>
        </div>
        <div class="leg-type">
            <p>O型腿: <span class="prob-value">0%</span></p>
            <div class="progress-bar">
                <div class="progress-fill" style="background-color: #f6ad55"></div>
            </div>
        </div>
        <div class="leg-type">
            <p>X型腿: <span class="prob-value">0%</span></p>
            <div class="progress-bar">
                <div class="progress-fill" style="background-color: #f56565"></div>
            </div>
        </div>
    </div>
</div>
<script src="{{ url_for('static', filename='js/index.js') }}"></script>
</body>
</html>